<template>
  <ul :class="[prefixCls, `${prefixCls}--${theme}`]" :style="contWidth" ref="contRef">
    <li
      class="tab-item cursor-pointer"
      @click="changeMenu(item, 1)"
      v-for="(item, index) in list"
      :key="index"
    >
      <div class="menu-text" :class="{ active: currentIndex == item.meta!.moduleId }"
        >{{ item.meta!.title }}
      </div>
    </li>
    <li class="tab-item cursor-pointer" v-if="countNum" ref="liRef">
      <Dropdown
        overlayClassName="menu-drop-down"
        trigger="click"
        :getPopupContainer="() => (liRef as HTMLElement)"
      >
        <span class="drop-title">
          <EllipsisOutlined style="color: #fff; font-size: 35px" />
        </span>
        <template #overlay>
          <Menu @click="handleMenu" :selected-keys="selectKeys">
            <MenuItem v-for="(items, index) in dropDownList" :key="index">
              <div>
                {{ items.meta!.title }}
              </div>
            </MenuItem>
          </Menu>
        </template>
      </Dropdown>
    </li>
  </ul>
</template>

<script lang="ts" setup>
  import { computed, ref, onMounted, nextTick } from 'vue';
  import { useRoute } from 'vue-router';
  import type { PropType } from 'vue';
  import type { Menu as Menus } from '/@/router/types';
  import { usePermissionStore } from '/@/store/modules/permission';
  import { usePermission } from '/@/hooks/web/usePermission';
  import { propTypes } from '/@/utils/propTypes';
  import { useDesign } from '/@/hooks/web/useDesign';
  import { Dropdown, Menu, MenuItem } from 'ant-design-vue';
  import { EllipsisOutlined } from '@ant-design/icons-vue';
  const { path } = useRoute();

  // import { useDomainStoreWithOut } from '/@/store/modules/domain';

  const $props = defineProps({
    firstMenuList: {
      type: Array as PropType<Menus[]>,
      default: () => [],
    },
    theme: propTypes.oneOf(['dark', 'light']),
    logoWidth: {
      type: String,
      default: '0',
    },
  });
  const list = ref<any[]>([]);
  const dropDownList = ref<any[]>([]);
  const countNum = ref<number>(0);
  const selectKeys = ref<number[]>([]);
  const { prefixCls } = useDesign('header-tab-menu');
  const permissionStore = usePermissionStore();
  const liRef = ref<HTMLElement | null>(null);
  // const useDomainStore = useDomainStoreWithOut();

  const contRef = ref<HTMLElement | null>(null);

  const { refreshMenu } = usePermission();
  const currentIndex = computed(() => {
    return permissionStore.getFirstMenuParams?.moduleId;
  });

  const contWidth = computed(() => {
    return { width: `calc(100% - ${$props.logoWidth})` };
  });

  // 计算宽数量
  const computedCount = () => {
    list.value = $props.firstMenuList;
    if (contRef.value) {
      const count = Math.floor(contRef.value.offsetWidth / 106);

      if (count < $props.firstMenuList.length) {
        list.value = $props.firstMenuList.slice(0, count - 1);
        dropDownList.value = $props.firstMenuList.slice(count - 1);
        countNum.value = count;
      }
    }

    initSelect();
  };

  const handleMenu = ({ key }) => {
    selectKeys.value = [key];
    changeMenu(dropDownList.value[key], 2);
  };

  // 初始化选中
  const initSelect = () => {
    const index = dropDownList.value.findIndex((i) => i.redirect === path);
    index > -1 && (selectKeys.value = [index]);
  };

  onMounted(async () => {
    await nextTick();
    computedCount();
  });

  // const domain = useDomainStore.getProjectInfo.domain;
  // const selectDomain = useDomainStore.getDomain;

  const changeMenu = (item, num) => {
    if (num === 1) {
      selectKeys.value = [];
    }
    const {
      meta: { moduleId },
    } = item;
    if (currentIndex.value == moduleId) return;
    const params = {
      moduleId,
      redirect: '',
    };
    permissionStore.setFirstMenuParams(params);
    refreshMenu();
  };
</script>

<style lang="less">
  @prefix-cls: ~'@{namespace}-header-tab-menu';

  .@{prefix-cls} {
    flex: 1;
    display: flex;
    margin-bottom: 0;
    overflow-x: auto;
    line-height: normal;

    &--light {
      color: @text-color-defined;
    }

    .tab-item {
      white-space: nowrap;
      display: flex;
      align-items: center;
      width: 88px;
      text-align: center;

      margin-right: 18px;
    }

    .active {
      position: relative;
      background-color: @white-opcity-01;
      padding: 11px 16px;
      border-radius: 4px;
    }

    .menu-text {
      // font-weight: bold;
      color: @white;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
</style>
